<template>
  <view class="page page-grey has-fixed-footer page-dispatch">
    <page-header :showPlaceHolder="false"></page-header>
    <view class="dispatch-list">
      <view class="dispatch-item" v-for="item in listData" :key="item.id" @click="handleToForm(item.id)">
        <view class="dispatch-item-header">
          <fui-icon customPrefix="iconfont" name="vms-icon-fasong" size="32" color="#f97e09"></fui-icon>
          <fui-text :text="item.name" size="28" fontWeight="bold" color="#333"></fui-text>
        </view>
        <view class="dispatch-item-content">
          <view class="dispatch-item-type">
            <fui-tag text="省" theme="plain" type="danger" :padding="['4rpx', '4rpx']" size="24"></fui-tag>
            <fui-text text="x" size="24" fontWeight="bold" color="#333"></fui-text>
            <fui-text :text="item.province" size="24" fontWeight="bold" color="#333"></fui-text>
          </view>
          <view class="dispatch-item-type">
            <fui-tag text="市" theme="plain" type="warning" :padding="['4rpx', '4rpx']" size="24"></fui-tag>
            <fui-text text="x" size="24" fontWeight="bold" color="#333"></fui-text>
            <fui-text :text="item.city" size="24" fontWeight="bold" color="#333"></fui-text>
          </view>
          <view class="dispatch-item-type">
            <fui-tag text="县" theme="plain" type="success" :padding="['4rpx', '4rpx']" size="24"></fui-tag>
            <fui-text text="x" size="24" fontWeight="bold" color="#333"></fui-text>
            <fui-text :text="item.district" size="24" fontWeight="bold" color="#333"></fui-text>
          </view>
          <!-- <view class="dispatch-item-type">
            <fui-tag text="镇" theme="plain" type="primary" :padding="['4rpx', '4rpx']" size="24"></fui-tag>
            <fui-text text="x" size="24" fontWeight="bold" color="#333"></fui-text>
            <fui-text :text="item.county" size="24" fontWeight="bold" color="#333"></fui-text>
          </view> -->
        </view>
      </view>
    </view>
    <!-- 加载提示 -->
    <fui-loadmore v-show="listData.length" :state="moreState"></fui-loadmore>
    <fui-empty v-show="!listData.length" src="/static/images/empty/data.png" :isFixed="true" title="暂无发货地信息" size="28" color="#999"></fui-empty>
    <view class="ui-fixed-footer">
      <fui-button text="添加发货地" height="78rpx" @click="handleToAdd"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh	} from '@dcloudio/uni-app'
import dispatchApi from '@/api/dispatch'
import { useStore } from 'vuex'
import pageHeader from '@/components/header'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const queryParams = ref({})
const listData = ref([])
const moreState = ref(1)

onShow(() => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    supplyChainId: store.getters.companyId
  }
  getDispatchList()
})

const listApiUrl = computed(() => {
  let apiUrl = ''
  if (store.getters.userType == 1) apiUrl = 'pageBySupplyChain' // 供应链发货地
  if (store.getters.userType == 2) apiUrl = 'pageBySupplierList' // 供应商发货地
  return apiUrl
})

// 获取供应链/供应商发货地列表
const getDispatchList = () => {
  uni.stopPullDownRefresh()
  try {
    dispatchApi[listApiUrl.value](queryParams.value).then((res) => {      
      modal.closeLoading()
      if (res.code === 0) {
        const resData = res.data && res.data.list ? res.data.list : []
        const newData = resData.map((item) => {
          return {
            ...item,
            name: item.deliveryPlace,
            province: item.sheng,
            city: item.shi,
            district: item.xian,
            county: item.zhen
          }
        })
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err) {
    modal.closeLoading()
  }
}

const handleToAdd = () => {
  tab.navigateTo('/pages/dispatch/form')
}

const handleToForm = (id) => {
  uni.navigateTo({
    url: '/pages/dispatch/form?id=' + id
  })
}

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getDispatchList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...')
    moreState.value = 2
    queryParams.value.pageNo++
    getDispatchList()
  }
})
</script>

<style lang="scss" scoped>
.page-dispatch {
  padding: 42rpx 36rpx;
  .dispatch-list {
    .dispatch-item {
      border-radius: 16rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      padding: 0 20rpx;
      .dispatch-item-header {
        border-bottom: 2rpx solid var(--fui-color-border);
        padding: 20rpx 0;
        .fui-icon {
          margin-right: 16rpx;
        }
      }
      ::v-deep .dispatch-item-content {
        display: flex;
        justify-content: space-between;
        padding: 28rpx;
        .dispatch-item-type {
          .fui-tag__wrap {
            margin-right: 12rpx !important;
          }
          .fui-tag__text {
            font-weight: bold;
          }
        }
      }
    }
  }
  .dispatch-footer {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--fui-bg-color-grey);
    padding: 36rpx 36rpx;
  }
}
</style>
